<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<jsp:include page="../common/header.jsp"></jsp:include>
<html>
<head>
<link rel="stylesheet" href="css/control.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="refresh" content="30">
<title>智能监控</title>
</head>
<body>
  <p class="ChineseName">智慧大棚温控监测系统</p>
  <table id="t_button">
					<thead>
						<tr>
							<th>时间</th>
							<th>设备A</th>
							<th>设备B</th>
							<th>设备C</th>
							<th>设备D</th>
							<th>设备E</th>
							<th>平均温度</th>
							<th>状态</th>
							<th>报警</th>
							<th>电量</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${control }" var="control" begin="${control.size()>=8?control.size()-5:0}" varStatus="status">
							
							<tr>
									<td>${control.time }</td>
								    <td>${control.dev1 }</td>
								    <td>${control.dev2 }</td>
								    <td>${control.dev3 }</td>
								    <td>${control.dev4 }</td>
								    <td>${control.dev5 }</td>	
								    <td>${control.aver }</td>
								    <td>${control.status }</td>
								    <td>${control.alarm }</td>
								    <td>${control.power }</td>
							</tr>

						</c:forEach>
					</tbody>
				</table>
				
	<div class="Table1">
		<div style="position: absolute; left: 50px; top: 5px;">
			<span id="Temper"
				style="font-size: 60px; font-family: 微软雅黑; color: white">温 度 </span>
		</div>
		<div style="position: absolute; left: 150px; top: 40px;">
			<span id="Status"
				style="width: 80px; height: 36px; text-align: center; background-color: #eeeeee; border-radius: 10px; line-height: 36px; position: absolute; left: 100px; top: -10px; font-size: 18px; font-family: STHupo; color: red;"></span>
				<span id="Status1"
				style="width: 80px; height: 36px; text-align: center;  border-radius: 10px; line-height: 36px; position: absolute; left: 100px; top: -10px; font-size: 18px; font-weight:bolder; font-family: STHupo; color: green;"></span>
		</div>
		<div style="position: absolute; left: 50px; top: 100px;">
			<span id="Speed"
				style="font-size: 30px; font-family: 微软雅黑; color: white">风 速</span>
		</div>
		<div style="position: absolute; left: 50px; top: 150px;">
			<span id="Mode"
				style="font-size: 30px; font-family: 微软雅黑; color: white">模 式</span>
		</div>
		<div style="position: absolute; left: 50px; top: 200px;">
			<span id="Set"
				style="font-size: 30px; font-family: 微软雅黑; color: white">设 定</span>
		</div>
		<div style="position: absolute; left: 360px; top: -40px;">
			<image id="Alarm" height="45" width="50"></image>
		</div>
		<div style="position: absolute; left: 50px; top: 250px;">
			<span id="Power"
				style="font-size: 30px; font-family: 微软雅黑; color: white">电 量</span>
		</div>
		<div style="position: absolute; left: 50px; top: 350px;">
			<span id="Start"
				style="font-size: 30px; font-family: 微软雅黑; color: red">开 机 温 度</span>
		</div>
		<div style="position: absolute; left: 50px; top: 400px;">
			<span id="End"
				style="font-size: 30px; font-family: 微软雅黑; color: blue">关 机 温 度</span>
		</div>
	</div>
	<script type="text/javascript">
    <c:forEach items="${control }" var="control" begin="${control.size()-1}">
		document.getElementById("Temper").innerHTML="${control.aver}℃";
		document.getElementById("Start").innerHTML="开机温度：${control.start}℃";
		document.getElementById("End").innerHTML="关机温度：${control.end}℃";
		document.getElementById("Set").innerHTML="设定温度：${control.set}℃";
		document.getElementById("Power").innerHTML="电 功 率：${control.power} KWh";
		<c:choose>
	    	<c:when test="${control.status==0}">
	   		document.getElementById("Status").innerHTML="关 机";
	    	</c:when>
	    	<c:when test="${control.status==1}">
	    	document.getElementById("Status1").innerHTML="开 机";
	   		</c:when>
		</c:choose>
		<c:choose>
			<c:when test="${control.speed==1}">
		    document.getElementById("Speed").innerHTML="风 速：小";
		    </c:when>
		    <c:when test="${control.speed==2}">
		    document.getElementById("Speed").innerHTML="风 速：中";
		    </c:when>
		    <c:when test="${control.speed==3}">
		    document.getElementById("Speed").innerHTML="风 速：大";
		    </c:when>
		</c:choose>
		<c:choose>
			<c:when test="${control.mode==0}">
		    document.getElementById("Mode").innerHTML="模 式：自 动";
		    </c:when>
		    <c:when test="${control.mode==1}">
		    document.getElementById("Mode").innerHTML="模 式：制 冷";
		    </c:when>
		    <c:when test="${control.mode==2}">
		    document.getElementById("Mode").innerHTML="模 式：除 湿";
		    </c:when>
		    <c:when test="${control.mode==3}">
		    document.getElementById("Mode").innerHTML="模 式：送 风";
		    </c:when>
		    <c:when test="${control.mode==4}">
		    document.getElementById("Mode").innerHTML="模 式：制 热";
		    </c:when>
		</c:choose>
		<c:choose>
    		<c:when test="${control.alarm==1}">
   			document.getElementById("Alarm").src="image/alarm.png";
    		</c:when>
    		<c:when test="${control.alarm==0}">
    		document.getElementById("Alarm").src="image/unalarm2.png";
   			</c:when>
		</c:choose>
	</c:forEach>;
	
	</script>
  
<img style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-Index: -1;"
	 src="image/background1.jpg" />
</body>
</html>